<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ΦΑΝΤΑΣΜΑΤΑΚΙΑ</title>
<script type="text/javascript" >
var min_x=1;
var min_y=1;
var num_rows=9;
var num_columns=6;
var tetragono=new Array();
var pionia=new Array();
var current_pioni;//ΤΟ ΤΡΕΧΟΝ ΠΙΟΝΙ ΤΟ ΟΠΟΙΟ ΘΑ ΠΑΙΞΕΙ

function pioni(){
//ΠΕΔΙΑ-ΙΔΙΟΤΗΤΕΣ
this.ikonidio;//ΤΟ ΕΙΚΟΝΙΔΙΟ ΤΟΥ ΠΙΟΝΙΟΥ ΣΤΟΝ ΠΙΝΑΚΑ ΤΟΥ ΠΑΙΧΝΙΔΙΟΥ
this.id;
this.color;//ΜΠΛΕ ή ΚΟΚΚΙΝΟ  b, r.
this.owner;//ΤΟ id ΤΟΥ ΠΑΙΚΤΗ ΠΟΥ ΕΙΝΑΙ ΙΔΙΟΚΤΗΤΗΣ
this.row;//Η ΣΥΝΤΕΤΑΓΜΕΝΗ Χ
this.column;//Η ΣΥΝΤΕΤΑΓΜΕΝΗ Υ
this.is_active;//ΑΝ ΕΙΝΑΙ ΕΝΕΡΓΟ ή ΕΧΕΙ ΒΓΕΙ ΑΠΟ ΤΟ ΠΑΙΧΝΙΔΙ
this.state;//0-ΣΤΗ ΘΗΚΗ , 1-ΣΤΟ ΠΑΙΧΝΙΔΙ , 2-ΕΚΤΟΣ ΠΑΙΧΝΙΔΙΟΥ. ΑΝ ΕΧΕΙ ΤΟΠΟΘΕΤΗΘΕΙ ΣΤΟ ΠΑΙΧΝΙΔΙ ή ΕΙΝΑΙ ΑΚΟΜΑ ΣΤΗΝ ΘΗΚΗ ΜΕ ΤΑ ΠΙΟΝΙΑ ή ΕΧΕΙ ΒΓΕΙ ΑΠΟ ΤΟ ΠΑΙΧΝΙΔΙ.
//ΜΕΘΟΔΟΙ
this.Activate_valid_squares_for_move=activate_valid_squares_for_move;//ΕΝΕΡΓΟΠΟΙΗΣΗ ΤΩΝ ΤΕΤΡΑΓΩΝΩΝ ΠΟΥ ΜΠΟΡΕΙ ΝΑ ΠΑΕΙ ΤΟ ΠΙΟΝΙ.
this.Move=move;//Η ΣΥΝΑΡΤΗΣΗ ΑΥΤΗ ΠΑΙΡΝΕΙ ΟΡΙΣΜΑ ΤΟ ΙΔΙΟ ΤΟ ΠΙΟΝΙ ΩΣ ΑΝΤΙΚΕΙΜΕΝΟ.
}
function activate_valid_squares_for_move(the_pioni){//ΕΝΕΡΓΟΠΟΙΗΣΗ ΤΩΝ ΤΕΤΡΑΓΩΝΩΝ ΠΟΥ ΜΠΟΡΕΙ ΝΑ ΠΑΕΙ ΤΟ ΠΙΟΝΙ.
//Η ΠΑΡΑΜΕΤΡΟΣ the_pioni ΕΙΝΑΙ ΟΛΟΚΛΗΡΟ ΤΟ ΑΝΤΙΚΕΙΜΕΝΟ ΠΟΥ ΑΝΑΠΑΡΙΣΤΑ ΤΟ ΠΙΟΝΙ
//ΑΥΤΗ Η ΜΕΘΟΔΟΣ ΕΝΕΡΓΟΠΟΙΕΙ ΤΑ ΤΕΤΡΑΓΩΝΑ ΠΟΥ ΜΠΟΡΕΙ ΝΑ ΠΑΕΙ ΤΟ ΠΙΟΝΙ. ΚΑΤΟΠΙΝ ΜΕ ΚΛΙΚ ΠΑΝΩ ΣΤΟ ΤΕΤΡΑΓΩΝΟ ΑΥΤΟ, ΓΙΝΕΤΑΙ Η ΚΙΝΗΣΗ ΤΟΥ ΠΙΟΝΙΟΥ. 
activate_the_front_square(the_pioni);
activate_the_back_square(the_pioni);
activate_the_left_square(the_pioni);
activate_the_right_square(the_pioni);
}
function move(the_pioni,the_square){//Η ΣΥΝΑΡΤΗΣΗ ΑΥΤΗ ΠΑΙΡΝΕΙ ΟΡΙΣΜΑ ΤΟ ΙΔΙΟ ΤΟ ΠΙΟΝΙ ΩΣ ΑΝΤΙΚΕΙΜΕΝΟ.
//Η ΠΑΡΑΜΕΤΡΟΣ the_pioni ΕΙΝΑΙ ΟΛΟΚΛΗΡΟ ΤΟ ΑΝΤΙΚΕΙΜΕΝΟ ΠΟΥ ΑΝΑΠΑΡΙΣΤΑ ΤΟ ΠΙΟΝΙ. //Η ΠΑΡΑΜΕΤΡΟΣ the_square ΕΙΝΑΙ ΟΛΟΚΛΗΡΟ ΤΟ ΑΝΤΙΚΕΙΜΕΝΟ ΠΟΥ ΑΝΑΠΑΡΙΣΤΑ ΤΟ ΤΕΤΡΑΓΩΝΟ.
//Α.ΕΠΑΝΑΦΟΡΑ ΤΩΝ ΕΝΕΡΓΟΠΟΙΗΜΕΝΩΝ ΤΕΤΡΑΓΩΝΩΝ ΣΤΗΝ ΚΑΝΟΝΙΚΗ ΚΑΤΑΣΤΑΣΗ
//Β.ΣΤΕΙΛΕ ΤΗΝ ΑΙΤΗΣΗ ΣΤΟ ajax_response.php
}
function square(){
this.ikonidio;//ΤΟ ELEMENT ΣΤΟΝ ΠΙΝΑΚΑ ΠΟΥ ΑΝΤΙΣΤΟΙΧΕΙ ΣΤΟ ΣΥΓΚΕΚΡΙΜΕΝΟ ΤΕΤΡΑΓΩΝΟ.
this.id;//ΤΟ id ΤΟΥ ΑΝΤΙΣΤΟΙΧΟY element ΣΤΟΝ ΠΙΝΑΚΑ ΤΟΥ ΠΑΙΧΝΙΔΙΟΥ.
this.row;
this.column;
this.is_active;//ΑΝ ΕΙΝΑΙ ΕΝΕΡΓΟΠΟΙΗΜΕΝΟ ΑΠΟ ΤΗΝ ΣΥΝΑΡΤΗΣΗ activate_valid_squares_for_move ΓΙΑ ΝΑ ΠΑΕΙ ΕΚΕΙ ΚΑΠΟΙΟ ΠΙΟΝΙ.
this.occupied;//ΑΝ ΕΙΝΑΙ ΚΑΤΕΙΛΗΜΕΝΟ ΑΠΟ ΑΛΛΟ ΠΙΟΝΙ.
//ΜΕΘΟΔΟΙ
this.Activate=activate;//ΕΝΕΡΓΟΠΟΙΗΣΗ ΤΟΥ ΤΕΤΡΑΓΩΝΟΥ.
}
function activate(){
this.is_active=true;
this.ikonidio.setAttribute("bgcolor","#008800");

}

function init(){
init_square();
init_pionia();
}

function init_square(){
	for(var i=1;i<=num_rows;i++){
		tetragono[i]=new Array();
		for(var j=1;j<=num_columns;j++){
			tetragono[i][j]=new square();
			tetragono[i][j].id=""+i+j;
			tetragono[i][j].ikonidio=document.getElementById("t"+i+j);
			tetragono[i][j].row=i;
			tetragono[i][j].column=j;
			tetragono[i][j].is_active=false;
			tetragono[i][j].occupied=false;
		}
	}
}

function init_pionia(){
	for(var i=1;i<=16;i++){
		pionia[i]=new pioni();
		pionia[i].ikonidio=document.getElementById("p"+i);
		pionia[i].id=i;
		pionia[i].is_active=true;
		pionia[i].state=0;
	}
}
function play(ikonidio){
var pioni=pionia[parseInt(ikonidio.id.substring(1,ikonidio.id.length))];
current_pioni=pioni;
	if (pioni.state==0){//ΑΝ ΤΟ ΠΙΟΝΙ ΕΙΝΑΙ ΣΤΗΝ ΘΗΚΗ:
		// ΜΠΟΡΕΙ ΝΑ ΤΟΠΟΘΕΤΗΘΕΙ ΣΤΟ ΤΑΜΠΛΩ. ΕΝΕΡΓΟΠΟΙΟΥΝΤΑΙ ΤΑ ΤΕΤΡΑΓΩΝΑ ΣΤΑ ΟΠΟΙΑ ΜΠΟΡΕΙ ΝΑ ΤΟΠΟΘΕΤΗΘΕΙ ΤΟ ΠΙΟΝΙ.
		tetragono[8][2].Activate();
		tetragono[8][3].Activate();
		tetragono[8][4].Activate();
		tetragono[8][5].Activate();
		tetragono[9][2].Activate();
		tetragono[9][3].Activate();
		tetragono[9][4].Activate();
		tetragono[9][5].Activate();
		
	}
	if (pioni.state==1){//ΑΝ ΤΟ ΠΙΟΝΙ ΕΙΝΑΙ ΣΤΟ ΠΑΙΧΝΙΔΙ:
	
	}
	if (pioni.state==2){
	
	}
}
function action(the_tetragono){
	tetragono_target=tetragono[parseInt(the_tetragono.id.substring(1,2))][parseInt(the_tetragono.id.substring(2,3))];
	//ΣΤΗΝ ΠΕΡΙΠΤΩΣΗ ΠΟΥ ΤΟΠΟΘΕΤΕΙ Ο ΠΑΙΚΤΗΣ ΤΑ ΠΙΟΝΙΑ ΑΠΟ ΤΗΝ ΘΗΚΗ ΣΤΟ ΤΑΜΠΛΩ.
	if(tetragono_target.is_active==true){//ΑΝ ΕΝΕΡΓΟΠΟΙΗΘΗΚΕ ΤΟ ΤΕΤΡΑΓΩΝΟ ΠΟΥ ΕΚΑΝΕ ΚΛΙΚ Ο ΠΑΙΚΤΗΣ.
		if(tetragono_target.occupied==false){//ΑΝ ΔΕΝ ΕΙΝΑΙ ΚΑΤΕΙΛΗΜΕΝΟ.
			tetragono_target.occupied=true;
			tetragono_target.ikonidio.appendChild(current_pioni.ikonidio);
			current_pioni.row=tetragono_target.row;
			current_pioni.column=tetragono_target.column;
			//current_pioni.state=1;
			alert(current_pioni.row+" - "+current_pioni.column);
			for(i=1;i<=num_rows;i++){
				for(j=1;j<=num_columns;j++){
					tetragono[i][j].is_active=false;
					tetragono[i][j].ikonidio.setAttribute("bgcolor","#ffffff");
				}
			}
		}
	}
}


</script>
</head>

<body onload="init()">
<table width="50%" border="2" cellspacing="3" align="left">
  <tr>
    <td height="60px" width="60px" id="t11" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t12" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t13" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t14" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t15" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t16" onclick="action(this)"></td>
  </tr>
  <tr>
    <td height="60px" width="60px" id="t21" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t22" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t23" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t24" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t25" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t26" align="center" onclick="action(this)"></td>
  </tr>
  <tr>
    <td height="60px" width="60px" id="t31" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t32" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t33" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t34" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t35" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t36" align="center" onclick="action(this)"></td>
  </tr>
  <tr>
    <td height="60px" width="60px" id="t41" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t42" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t43" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t44" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t45" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t46" align="center" onclick="action(this)"></td>
  </tr>
  <tr>
    <td height="60px" width="60px" id="t51" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t52" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t53" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t54" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t55" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t56" align="center" onclick="action(this)"></td>
  </tr>
  <tr>
    <td height="60px" width="60px" id="t61" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t62" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t63" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t64" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t65" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t66" align="center" onclick="action(this)"></td>
  </tr>
  <tr>
    <td height="60px" width="60px" id="t71" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t72" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t73" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t74" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t75" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t76" align="center" onclick="action(this)"></td>
  </tr>
  <tr>
    <td height="60px" width="60px" id="t81" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t82" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t83" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t84" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t85" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t86" align="center" onclick="action(this)"></td>
  </tr>
  <tr>
    <td height="60px" width="60px" id="t91" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t92" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t93" align="center" onclick="action(this)"></td>
    <td height="60px"  width="60px"id="t94" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t95" align="center" onclick="action(this)"></td>
    <td height="60px" width="60px" id="t96" align="center" onclick="action(this)"></td>
  </tr>
</table>
<table width="20%" border="2" cellspacing="3">
  <tr>
    <td><img src="images/opponent.jpg"id="p13"/></td>
    <td><img src="images/opponent.jpg"id="p14"/></td>
    <td><img src="images/opponent.jpg"id="p15"/></td>
    <td><img src="images/opponent.jpg"id="p16"/></td>
  </tr>
  <tr>
    <td><img src="images/opponent.jpg"id="p9"/></td>
    <td><img src="images/opponent.jpg"id="p10"/></td>
    <td><img src="images/opponent.jpg"id="p11"/></td>
    <td><img src="images/opponent.jpg"id="p12"/></td>
  </tr>
  <tr>
    <td><img src="images/red.jpg" id="p5" onclick="play(this)"/></td>
    <td><img src="images/red.jpg" id="p6" onclick="play(this)"/></td>
    <td><img src="images/red.jpg" id="p7" onclick="play(this)"/></td>
    <td><img src="images/red.jpg" id="p8" onclick="play(this)"/></td>
  </tr>
  <tr>
    <td><img src="images/blue.jpg" id="p1" onclick="play(this)"/></td>
    <td><img src="images/blue.jpg" id="p2" onclick="play(this)"/></td>
    <td><img src="images/blue.jpg" id="p3" onclick="play(this)"/></td>
    <td><img src="images/blue.jpg" id="p4" onclick="play(this)"/></td>
  </tr>
</table>
</body>
</html>
